<template>
  <div class="total">
    <div class="left">
      <ul>
        <li v-for="(item,index) of left" :key="index" :class="{current: index===index1}" @click="clickMenuItem(index, $event)">
          {{item}}
        </li>
      </ul>
    </div>
    <div class="right" ref="wrapper1">
      <div class="hezi">
        <ul v-for="(item,index) of right" :key="index" ref="foodsWrapper">
          <li v-for="(item1,index) of item.content" :key="index">
            <img :src="item1" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import Vue from "vue";
export default {
  name: "huadodng",
  data() {
    return {
      left: [
        "建筑类",
        "考研类",
        "医学类",
        "法考类",
        "财会类",
        "教师类",
        "金融类"
      ],
      right: [
        {
          name: "建筑类",
          content: [
            "/static/images/st-1.png",
            "/static/images/st-2.png",
            "/static/images/st-3.png",
            "/static/images/st-4.png",
            "/static/images/st-5.png",
            "/static/images/st-6.png",
            "/static/images/st-7.png",
            "/static/images/st-8.png",
            "/static/images/st-9.png"
          ],
          num: 1
        },
        {
          name: "考研类",
          content: [
            "/static/images/st-10.png",
            "/static/images/st-11.png",
            "/static/images/st-12.png",
            "/static/images/st-13.png",
            "/static/images/st-14.png"
          ],
          num: 2
        },
        {
          name: "医学类",
          content: [
            "/static/images/st-15.png",
            "/static/images/st-16.png",
            "/static/images/st-17.png"
          ],
          num: 3
        },
        {
          name: "法考类",
          content: ["/static/images/st-18.png"],
          num: 4
        },
        {
          name: "财会类",
          content: [
            "/static/images/st-19.png",
            "/static/images/st-20.png",
            "/static/images/st-21.png",
            "/static/images/st-22.png",
            "/static/images/st-23.png"
          ],
          num: 5
        },
        {
          name: "教师类",
          content: [
            "/static/images/st-24.png",
            "/static/images/st-25.png",
            "/static/images/st-26.png"
          ],
          num: 6
        },
        {
          name: "金融类",
          content: ["/static/images/st-27.png", "/static/images/st-28.png"],
          num: 7
        }
      ],
      a: "",
      scrollY: 0,
      tops: [],
      scrollerHeight: 0,
      scrollerWidth: 0
    };
  },
  methods: {
    _initScroll() {
      this.a = new BScroll(this.$refs.wrapper1, {
        probeType: 3,
        click: true
      });
      this.scrollerHeight = this.a.scrollerHeight;
      this.scrollerWidth = this.a.scrollerWidth;
      console.log(this.a);
      this.a.on("scroll", pos => {
        this.scrollY = Math.abs(pos.y);
      });
    },
    clickMenuItem(index, e) {
      let li = this.$refs.foodsWrapper;
      // let height = 0;
      // for (let i = 0; i <= index; i++) {
      //   height = height + li[i].clientHeight;
      // }
      if (index == 5) {
        console.log(index);
        this.a.scrollToElement(li[index], 300, 0, -this.scrollerWidth+180);
      } else {
        this.a.scrollToElement(li[index], 300);
      }
    },
    _initTops() {
      //这里的一个坑，数组为引用类型，所以如果该内容则会出现数据联动，导致原来的也会变
      let tops = this.tops;
      let top = 0;
      tops.push(top);
      //console.log(tops);
      let lis = this.$refs.foodsWrapper;
      lis.forEach(ul => {
        top += ul.clientHeight;
        //console.log(top);
        tops.push(top);
      });
      this.index1;
      //   let a = [1, 2, 3];
      //   let b = a;
      //   b.push(5);
      //   console.log(a);
    }
  },
  mounted() {
    Vue.nextTick(() => {
      this._initScroll();
      this._initTops();
    });
  },
  computed: {
    index1() {
      const { tops, scrollY, scrollerHeight } = this;
      //   scrollY = scrollY + tops[8];
      //   console.log(scrollY, tops[7], scrollerHeight);
      if (scrollY > scrollerHeight - this.scrollerWidth-302) {
        return 6;
      } else {
        //遇到的坑，当我们用es6的标准使用findindex的时候返回值是当前数组的下标，最后一个元素如果省略字是当前元素
        return tops.findIndex((top, index) => {
          return scrollY >= top && scrollY < tops[index + 1];
        });
      }
    }
  }
};
</script>
<style scoped>
.total {
  overflow: hidden;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 3.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
}
.left {
  /* float: left; */
  flex: 0 0 4rem;
}
.left ul li {
  width: 4rem;
  height: 3rem;
  margin-bottom: 0.2rem;
  line-height: 3rem;
  background: #fff;
  border-left: 2px solid #fff;
  text-align: center;
  padding-right: 2px;
}
.right {
  flex: 1;
  box-sizing: border-box;
  padding-left: 0.2rem;
  padding-right: 0.5rem;
}
.right ul {
  overflow: hidden;
  margin-bottom: 2rem;
}
.right ul li {
  width: 50%;
  height: 0;
  padding-bottom: 46.47%;
  float: left;
  padding-left: 0.3rem;
  box-sizing: border-box;
  margin-top: 0.8rem;
}
.right ul li img {
  width: 100%;
}
.left ul li.current {
  background: transparent;
  border-left: 2px solid #ff4d4d;
}
</style>

